<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*"
         pageEncoding="UTF-8" %>
<%@page language="java" import="db_tool.DBConnection" %>
<%@page language="java" import="java.sql.ResultSet" %>
<%@page language="java" import="java.sql.Statement" %>

<%@page language="java" import="com.opensymphony.xwork2.ActionContext" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <meta name="author" content="Daliu"/>
    <meta name="keywords" content="长江上游珍稀特有鱼类保护信息管理系统、长江上游、珍稀特有鱼类、保护信息"/>
    <meta name="describe" content="长江上游珍稀特有鱼类保护信息管理系统"/>
    <title>长江上游珍稀特有鱼类保护信息管理系统</title>
    <link rel="icon" href="<%=path%>/bfish.ico" mce_href="<%=path%>/bfish.ico" type="image/x-icon">
    <link rel="shortcut icon" href="<%=path%>/bfish.ico" mce_href="<%=path%>/bfish.ico" type="image/x-icon">
    <link href="css/register.css" rel="stylesheet"/>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <!-- 表单验证 -->
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>

    <script type="text/javascript">

        $().ready(function () {
// 在键盘按下并释放及提交后验证提交表单
            $("#formxx").validate({
                rules: {
                    userName: {
                        required: true,
                        minlength: 2,
                        remote: {
                            url: "checkLogin.action",
                            type: "post",
                            data: {
                                uname: function () {
                                    return $("#userName").val();
                                },
                                "attr": "userName"
                            },
                            dataFilter: function (data) {//判断控制器返回的内容
                                return data !== "true";
                            }
                        }
                    },
                    PassWord: {
                        required: true,
                        minlength: 6
                    },
                    Telephone: {
                        required: true,
                        digits: true,
                        minlength: 11,
                        maxlength: 11,
                        remote: {
                            url: "checkLogin.action",
                            type: "post",
                            data: {
                                "Phone": function () {
                                    return $("#Telephone").val();
                                },
                                "attr": "Telephone",
                            },
                            dataFilter: function (data) {//判断控制器返回的内容
                                if (data == "true") {
                                    return false;
                                }
                                else {
                                    return true;
                                }
                            }
                        }
                    },
                    Email: {
                        required: true,
                        email: true,
                        remote: {
                            url: "checkLogin.action",
                            type: "post",
                            data: {
                                "Email": function () {
                                    return $("#Email").val();
                                },
                                "attr": "Email",
                            },
                            dataFilter: function (data) {//判断控制器返回的内容
                                if (data == "true") {
                                    return false;
                                }
                                else {
                                    return true;
                                }
                            }
                        }
                    },
                    Company: {
                        required: true,
                    },
                    Address: {
                        required: true,
                    },
                    picture: {
                        required: true,
                    },
                    Description: {
                        required: true,
                        minlength: 1
                    },
                    SuperiorName: {
                        required: true,
                        minlength: 1
                    },
                },
                messages: {
                    userName: {
                        required: "请输入用户名",
                        minlength: "用户名至少为两个字符",
                        remote: "该用户名已被注册",
                    },
                    PassWord: {
                        required: "请输入密码",
                        minlength: "密码至少为6个字符"
                    },
                    Company: {
                        required: "请输入所属单位",
                    },
                    Address: {
                        required: "请输入通讯地址",
                    },
                    Telephone: {
                        required: "请输入手机号",
                        digits: "请输入正确的手机号",
                        minlength: "请输入正确的手机号",
                        maxlength: "请输入正确的手机号",
                        remote: "该手机号已被注册",
                    },
                    Email: {
                        required: "请输入邮箱",
                        email: "请输入正确的邮箱",
                        remote: "该邮箱已被注册",
                    },
                    picture: {
                        required: "未选择文件",
                    },
                    Description: {
                        required: "该项不能为空",
                        minlength: "该项不能为空"
                    },
                    SuperiorName: {
                        required: "该项不能为空"
                    },
                },
                submitHandler: function (form) {  //通过之后回调

                    var formData = new FormData($("#formxx")[0]);
                    var url = "register.action";
//	    			 	 	   formData.append("flag","insert");
                    if ($("#Photo").val().length == 0) {
                        alert("未上传扫描件！");
                    } else {
                        if ($("#Photo").val().length > 100 || $("#Photo").val().length <= 0) {
                            formData.append("isNull", "");
                        }
                        else formData.append("isNull", "有");
                        $.ajax({
                            url: url,
                            type: "POST",
                            data: formData,
                            async: false,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function (result) {
                                if (result == "success") {

                                    alert("注册成功，请等待管理员审核！");
                                    location.href = "login.jsp";

                                }
                                else {
                                    alert("注册失败，请重新注册！");
                                }
                            }
                        });
                    }

                },
                invalidHandler: function (form, validator) {  //不通过回调
                    alert("注册失败");
                    return false;
                }
            });
            //协议注册页面隐藏
            $("#agreement").fadeIn(2000);
            $("#AgreementBtn,#fa-remove").click(function () {
                $("#agreement").fadeOut(1000);
            });
            //扫描件页面的显示和隐藏
            $("#instruction").click(function () {
                $("#scanFile").fadeIn(2000);
            });
            $("#AgreementBtn,#fa-remove").click(function () {
                $("#scanFile").fadeOut(1000);
            });

        });
        //图片上传实时预览
        function upload(obj) {
            var childs = document.getElementById("img_con").childNodes;
            for (var i = childs.length - 1; i >= 0; i--) {
                document.getElementById("img_con").removeChild(childs[i]);
            }

            $("#img_con").css("display", "block");
            var sum = obj.files.length;
            var str = "";
            for (var i = 0; i < sum; i++) {
                var url = window.URL.createObjectURL(obj.files[i]);
                var name = obj.files[i].name;
                str += "<li style='background:url(" + url + ") no-repeat center;background-size:contain'></li>"
            }
            $("#img_con").append(str);
        }

    </script>

</head>
<body class="background">
<!-- 注册协议弹出框  -->
<div class="modal" id="agreement">
    <div class="contents">
        <h3>注册协议</h3><i class="fa fa-remove fa-lg" id="fa-remove"></i>
        <div class="contents-body">
            <p><strong>【审慎阅读】</strong>您在申请注册流程中点击同意前，应当认真阅读以下协议。<strong>请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：</strong></p>
            <p>1、<strong>与您约定免除或限制责任的条款；</strong></p>
            <p>2、<strong>与您约定法律适用和管辖的条款；</strong></p>
            <p>3、<strong>其他以粗体下划线标识的重要条款。</strong></p>
            <p>如您对协议有任何疑问，可向XXXX咨询。</p>
            <p><strong>【特别提示】</strong>当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因XXXX与XX发生争议的，适用《XX服务协议》处理。如您在使用本系统过程中与其他用户发生争议的，依您与其他用户达成的协议处理。
            </p>
            <p><strong>阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。</strong></p>

            <button class="btn btn-large" type="button" id="AgreementBtn">同意协议</button>

        </div>
    </div>
</div>

<!-- 扫描文件说明  -->
<div class="modal" id="scanFile">
    <div class="contents">
        <h3>扫描文件说明</h3><i class="fa fa-remove fa-lg" id="fa-remove"></i>
        <div class="contents-body">
            <p><strong>【审慎阅读】</strong>您在申请注册流程中点击同意前，应当认真阅读以下扫描文件说明。<strong>请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：</strong></p>
            <p>1、<strong>身份证扫描件</strong></p>
            <p>2、<strong>单位盖章的文件扫描件</strong></p>
            <p>3、<strong>文件类型为图片</strong></p>
            <p>如您对说明有任何疑问，可向XXXX咨询。</p>

            <button class="btn btn-large" type="button" id="AgreementBtn">同意说明</button>

        </div>
    </div>
</div>
<form id="formxx" enctype="multipart/form-data">
    <fieldset class="fieldset">
        <legend>注册信息</legend>
        <p>
            <label class="item" for="userName">用户名:</label>
            <input class="confirm" id="userName" autocomplete="off" name="userName" placeholder="请输入用户名"
                   type="text"><font> *</font><span id="confirmMsg"></span>
        </p>
        <p>
            <label class="item" for="PassWord">密码:</label>
            <input id="PassWord" autocomplete="off" name="PassWord" placeholder="请输入登录密码" type="password"><font>
            *</font>
        </p>
        <p>
            <label class="item" for="company">单位:</label>
            <input id="Company" autocomplete="off" name="Company" placeholder="请输入所属单位" type="text"><font> *</font>
        </p>
        <p>
            <label class="item" for="address">通讯地址:</label>
            <input id="Address" autocomplete="off" name="Address" placeholder="请输入通讯地址" type="text"><font> *</font>
        </p>
        <p>
            <label class="item" for="Telephone">手机号:</label>
            <input class="confirm" id="Telephone" autocomplete="off" name="Telephone" placeholder="请输入手机号"
                   type="text"><font> *</font><span id="confirmPhone"></span>
        </p>
        <p>
            <label class="item" for="Email">Email:</label>
            <input class="confirm" id="Email" autocomplete="off" name="Email" type="text" placeholder="请输入邮箱账号"><font>
            *</font><span id="confirmEmail"></span>
        </p>
        <div class="upload">
            <label class="item" for="Photo">扫描件:</label>
            <!-- <div class="scanFile">
                <div class="button">
                    <input type="file" id="myfile" multiple="true" onchange="upload(this)" name="Photo" >
                    <i class="fa fa-plus fa-lg"></i>
                    <span>上传文件</span>
                </div>
                <span class="name">查看数据证明文件</span>
            </div> -->
            <input type="file" id="Photo" multiple="multiple" onchange="upload(this)" name="Photo" accept="image/*"><font> *</font>
            &nbsp;&nbsp;<a id="instruction" href="javascript:void(0)" class="returnLogin">说明</a>
        </div>
        <ul id="img_con">

        </ul>
        <p>
            <input class="submit" id="submit" type="submit" value="提交">
            &nbsp;&nbsp;<a href="login.jsp" class="returnLogin">已注册返回登录？</a>
        </p>
    </fieldset>
</form>
</body>
</html>